<template>
  <view class="cart-box">
    <view class="mark">
      <uni-icons
        type="cart-filled"
        color="#f0ad4e"
        size="50"
        class="cart-img"
        @tap="openCartPopup"
      ></uni-icons>
      <view class="tag">1</view>
    </view>
    <view class="price">
      <u-text text="￥12.00" margin="10rpx 20rpx"></u-text>
    </view>
    <view class="pay-btn">
      <u-button
        type="warning"
        @tap="toPay"
        :disabled="disabledPay"
      >
        <!-- {{ `差3元起送` ||'去结算' }} -->
        去结算
      </u-button>
    </view>
  </view>
</template>
<script lang="ts" setup>
const emit = defineEmits([
  "openCartPopup",
  "toPay",
]);

const openCartPopup = () => {
  emit("openCartPopup"); // 或者 emit('delete', 123);
};
const toPay = () => {
  emit("toPay"); // 或者 emit('delete', 123);
};
</script>
<style lang="scss" scoped>
.cart-box {
  position: fixed;
  /*  #ifdef  H5  */
  bottom: 130rpx;
  /*  #endif  */

  /*  #ifdef  MP-WEIXIN  */
  bottom: 20rpx;
  /*  #endif  */
  left: 30rpx;
  right: 30rpx;
  height: 96rpx;
  z-index: 1200;
  border-radius: 48rpx;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .cart-img {
    width: 96rpx;
    height: 96rpx;
    position: relative;
    margin-top: -48rpx;
  }

  .pay-btn {
    max-width: 200rpx;
    height: 100%;
    padding: 0 30rpx;
    color: #ffffff;
    border-radius: 0 50rpx 50rpx 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    //	font-size: $font-size-base;
  }

  .mark {
    padding-left: 46rpx;
    margin-right: 30rpx;
    position: relative;

    .tag {
      background-color: $uni-color-warning;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      //	font-size: $font-size-sm;
      position: absolute;
      right: -10rpx;
      top: -20rpx;
      border-radius: 100%;
      padding: 4rpx;
      width: 40rpx;
      height: 40rpx;
      opacity: 0.9;
    }
  }

  .price {
    flex: 1;
    //color: $text-color-base;
  }
}

</style>